<template>
    <view class="page">
        <view class="height30"></view>
        <view class="box1" @click="addressList">
            <view class="address">
                <view :class="{'gray':!addressInfo.address}">{{addressInfo.address?addressInfo.address:"您还没有选择收货地址，请点击前往添加"}}</view>
                <view class="p2" v-if="addressInfo.address">{{addressInfo.name}}<text class="p3">{{addressInfo.phone}}</text></view>
            </view>
            <view style="color: #fe4646;">
                <text class="iconfont icon-more more"></text>
            </view>
        </view>
        <view class="height30"></view>
        <view class="box2">
            <view class="goods" v-for="item,index in product" :key="index">
                <image v-if="item.goods_cover" :src="item.goods_cover"></image>
                <view class="boxli">
                    <view style="margin-bottom:40rpx;">
                        <view class="boxlit">
                            <view class="yichu">{{item.goods_name}}</view>
                            <view class="price">{{item.unit_price}}</view>
                        </view>
                        <view class="boxr">
                            <view>￥{{item.specify}}</view>
                            <view>×{{item.number}}</view>
                        </view>
                    </view>
                    <!-- <view style="font-size:26rpx; color:#999; padding-top:10rpx;border-top:1rpx solid #efefef ;">
                    现在付款，预计{{product.time}}送达</view> -->
                </view>
            </view>
        </view>
        <view class="height30"></view>
        <view style="padding: 30rpx; background:#fff;">
            <view style="display:flex;justify-content:space-between; align-items:center; padding:30rpx 0; font-size:30rpx;border-bottom: 1rpx solid #efefef;">
                <view>商品总额：</view>
                <view style="color:#fe4646;">￥{{data.total_price }}</view>
            </view>
            <view style="display:flex;justify-content:space-between; align-items:center; padding:30rpx 0; font-size:30rpx; border-bottom: 1rpx solid #efefef;">
                <view>运费：</view>
                <view v-if="data.fee_price" style="color:#fe4646;">{{ data.fee_price }}</view>
                <view v-else>包邮</view>
            </view>
            <view style="display:flex;justify-content:space-between; align-items:center; padding:30rpx 0; font-size:30rpx; border-bottom: 1rpx solid #efefef;">
                <view>优惠券：</view>
                <view v-if="couponData.couponList.length>0" style="color:#999; display: flex; align-items:center;" @click="openCoupe">
                    <sapn v-if="replace_price==0">有可用</sapn>
                    <sapn style="color:#fe4646;" v-else>-￥{{ replace_price}}</sapn>
                    <text class="iconfont icon-more more"></text>
                </view>
                <view v-else style="color:#999; display: flex; align-items:center;">
                    无可用
                </view>
            </view>
            <view style="display:flex;justify-content:space-between; align-items:center; padding:30rpx 0; font-size:30rpx; border-bottom: 1rpx solid #efefef;"
                @click="open">
                <view>金币：</view>
                <view style="color:#999; display: flex; align-items:center;">
                    <span style="color:#fe4646;">-￥{{ coin_deduction }}</span>
                    <text class="iconfont icon-more more"></text>
                </view>
            </view>
            <!-- <view style="display:flex;justify-content:space-between; align-items:center; padding:30rpx 0; font-size:30rpx;border-bottom: 1rpx solid #efefef;">
                <view>优惠券</view>
                <view style="display: flex; align-items:center;">
                    <view>专用发票</view>
                    <text class="iconfont icon-more more"></text>
                </view>
            </view> -->
        </view>
        <choose-coupon v-if="couponData.couponList" v-model="couponData.showCouponPicker" :couponData="couponData" />

        <uni-popup ref="popup" type="bottom" background-color="#f2f2f2">
            <view class="modal-box page_box">
                <view class="modal-head x-bc">
                    <text></text>
                    <text class="head-title">选择金币</text>
                    <text class="cuIcon-roundclosefill" @tap="close"></text>
                </view>
                <view class="modal-content content_box">
                    <view class="cu-form-group" style="margin-top: 10px;">
                        <view class="title">不使用金币</view>
                        <u-checkbox-group @change="checkChange">
                            <u-checkbox v-model="isChecked" shape="circle" active-color="#2e996e" size="50rpx"></u-checkbox>
                        </u-checkbox-group>
                    </view>
                </view>
                <view class="modal-content content_box">
                    <view class="cu-form-group" style="margin-top: 10px;">
                        <view class="title">{{data.coin}}金币，可抵扣<span style="color:#FF2020; font-size:34rpx;">￥{{ data.coin_deduction }}</span></view>
                        <u-checkbox-group @change="checkUse">
                            <u-checkbox v-model="isUse" shape="circle" active-color="#2e996e" size="50rpx"></u-checkbox>
                        </u-checkbox-group>
                    </view>
                </view>
                <view class="modal-foot x-c">
                    <button class="cu-btn serve-btn" @tap="saveCoin">确定</button>
                </view>
            </view>
        </uni-popup>
        <!--底部-->
        <view class='shop-foot'>
            <view></view>
            <view class='foot-total'>
                <view class='foot-count' style="font-size:30rpx;">共{{data.total_number}}件，合计：
                    <text style="color:#FF2020; font-size:34rpx;">¥{{totalMoney }}</text>
                </view>
                <view class='foot-num' @tap='goPay'>去付款</view>
            </view>
        </view>
    </view>
</template>

<script>
import {
    createOrder
} from '@/api/mall.js'
import chooseCoupon from "@/pagesA/components/chooseCoupon/chooseCoupon.vue"
export default {
    components: {
        chooseCoupon
    },
    data() {
        return {
            addressInfo: {
                address: '',
                name: '',
                phone: '',
            },
            couponList: [
                // {
                //     couponName: '',
                //     couponTime: '',
                //     money: '',
                //     moneyinfo: '',
                // },
            ],
            status: 0,
            product: [],
            totalCount: {
                pprice: '3000.00',
                num: '6',
            },
            selectData: {},
            data: {},
            $imgUrl: this.$imgUrl,
            couponData: {
                nocouponList: [{
                    url: "/pages/brand/index/id/1",
                    money: "150",
                    title: "满2000减150元",
                    ticket: "YMC_5c929fbf47235",
                    seller_name: "天猫官方旗舰店",
                    end_time: "2019-04-20 01:51:20",
                    state: "1",
                    checked: false,
                    disable: true
                },
                {
                    url: "/pages/brand/index/id/1",
                    money: "50",
                    title: "满1000减50元",
                    ticket: "YMC_5c929fbf47235",
                    seller_name: "天猫官方旗舰店",
                    end_time: "2019-04-20 01:51:20",
                    state: "1",
                    checked: false,
                    disable: true,
                },
                ],
                couponList: [
                ],
                title: '选择优惠券',
                isPrice: false,
                showCouponPicker: false,
                noUseCoupon: true // 是否使用优惠券
            },
            coupon_id: '',
            replace_price: 0,//优惠金额
            coin_deduction: 0,
            isChecked: false,
            isUse: true,
            addressId: ''

        }
    },
    computed: {
        totalMoney() {
            let sum = 0;
            sum = this.data.total_price - this.replace_price - this.coin_deduction
            return sum < 0 ? 0.00 : sum.toFixed(2);
        }
    },
    onShow: function () {
        let pages = getCurrentPages();
        let currPage = pages[pages.length - 1]; //当前页面
        // console.log(currPage.data.mydata)
        // let address = currPage.data.mydata;
        // if (addressInfo) {
        //     this.setData({
        //         addressInfo
        //     })
        // }
        console.log(uni.getStorageSync("addressListLength"), "长度长度")
        if (uni.getStorageSync("addressListLength") == 0) {
            this.clearAddress()
        }
    },

    onLoad(query) {
        if (query) {
            this.data = JSON.parse(decodeURIComponent(query.dataList))
            console.log(this.data, "this.data777")
            // 选择优惠券开始
            this.couponList = this.data.coupon
            this.couponList.forEach(e => {
                e.checked = false
            });
            console.log(this.couponList, "this.couponList")
            this.couponData.couponList = this.couponList
            console.log(this.couponData.couponList, "this.couponData.couponList")
            // 选择优惠券结束
            this.coin_deduction = this.data.coin_deduction
            if (this.data.address) {
                this.addressInfo.address = this.data.address.province + this.data.address.city + this.data.address.area + this.data.address.detailed
                this.addressInfo.name = this.data.address.name
                this.addressInfo.phone = this.data.address.mobile
                this.addressId = this.data.address.id
            }
            this.product = this.data.lists
            this.product.forEach((e, i) => {
                let newStr = e.goods_spec.replace(/::/g, ":")
                e.specify = newStr.replace(/;;/g, ";")
            });
        }
        this.$bus.$on('addAddress', this.addAddress)
        this.$bus.$on('updateChecked', this.updateChecked)
    },
    onUnload() {
        uni.$off('addAddress')
        uni.$off('updateChecked')
    },
    methods: {
        addressList() {
            uni.navigateTo({
                url: '/pagesA/my/addressList?type=selectedPath'
            });
        },
        clearAddress() {
            this.addressInfo.address = ''
            this.addressId = ''
        },
        addAddress(val) {
            console.log("接收地址123456")
            console.log(val, "val")
            console.log(333)
            this.selectData = val
            console.log(this.selectData, "this.selectData")
            if (this.selectData.province) {
                this.addressInfo.address = this.selectData.province + this.selectData.city + this.selectData.area + this.selectData.detailed
            }
            console.log(this.addressInfo.address, "返回的值")
            this.$set(this.addressInfo, "name", this.selectData.name)
            this.$set(this.addressInfo, "phone", this.selectData.mobile)
            this.addressId = this.selectData.id
        },
        updateChecked(index) {
            console.log('index', index);
            if (index == -1) { // 不使用优惠券
                this.clearCoupe()
                this.couponData.noUseCoupon = true;
                for (let i = 0; i < this.couponData.couponList.length; i++) {
                    this.couponData.couponList[i].checked = false;
                }
            } else {
                this.couponData.noUseCoupon = false;
                let data = this.couponData.couponList[index]
                console.log(data, "this.couponData.couponList[index]")
                // this.couponData.couponList[index].checked = !this.couponData.couponList[index].checked;
                this.replace_price = data.replace_price
                this.coupon_id = data.id
                this.closeCoupe()
            }
        },
        clearCoupe() {
            this.replace_price = 0
            this.coupon_id = ''
        },
        goPay() {
            if (!this.addressInfo.address) {
                uni.showToast({
                    title: '请选择地址~',
                    icon: 'none'
                });
                return
            }
            let array = []
            this.product.forEach(e => {
                array.push(e.marking)
            });
            createOrder({
                type: this.data.type,
                address_id: this.addressId,
                markings: array.join(","),
                coupon_id: this.coupon_id,
                is_use_coin: this.data.is_use_coin_goods
            }).then(res => {
                if (res.code == 1) {
                    console.log(res.data, "发起支付")
                    let data = { ...res.data, ...{ pageType: 2 } }
                    uni.navigateTo({
                        url: '/pagesA/mall/cashierDesk?dataList=' + encodeURIComponent(JSON.stringify(data))
                    })
                }
            })
        },
        openCoupe() {
            // this.$refs.popup.open()
            this.couponData.showCouponPicker = true;
            console.log(this.couponData.showCouponPicker, "this.couponData.showCouponPicker")
        },
        closeCoupe() {
            this.couponData.showCouponPicker = false;
        },
        open() {
            this.$refs.popup.open()
        },
        close() {
            this.$refs.popup.close()
        },
        checkChange(e) {
            console.log(e, "eeee")
            if (e.length == 1) {
                this.coin_deduction = 0
                this.data.is_use_coin_goods = 0
                this.isUse = false
            }
        },
        checkUse(e) {
            console.log(e.length, "eeeee")
            if (e.length == 1) {
                this.coin_deduction = this.data.coin_deduction
                this.data.is_use_coin_goods = 1
                this.isChecked = false
            }
        },
        saveCoin() {
            if (!this.isUse && !this.isChecked) {
                return this.$message("请选择是否使用金币")
            }
            this.close()
        }
    }
}
</script>

<style lang="scss" scoped>
.page {
  background: #fff;
  height: 100vh;
  .height30 {
    background: #efefef;
    height: 30rpx;
  }
  .box1 {
    background: #fff;
    display: flex;
    padding: 30rpx;
    justify-content: space-between;
    align-items: center;
    // border-bottom: 3rpx dashed #999;
    font-size: 30rpx;
    height: 200rpx;

    .address {
      .gray {
        color: #fe4646;
      }
      .p2 {
        font-size: 28rpx;
        margin-top: 20rpx;
        .p3 {
          margin-left: 10rpx;
        }
      }
    }
    // text{
    //     color: #2d996c;
    // }
  }
  .box2 {
    background: #fff;
    padding: 0 30rpx;
    .goods {
      display: flex;
      padding: 30rpx 0;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1rpx solid #efefef;
      image {
        width: 160rpx;
        height: 160rpx;
      }
      .boxli {
        width: 460rpx;
        .boxlit {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 30rpx;
          font-size: 28rpx;
          .yichu {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            width: 300rpx;
          }
          .price {
            color: #ff2020;
            font-size: 34rpx;
          }
        }
        .boxr {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 26rpx;
          color: #999;
        }
      }
    }
  }
}

.shop-foot {
  padding: 0 30rpx 40rpx 30rpx;
  /* border-top: 2rpx solid #F7F7F7; */
  background-color: #ffffff;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.foot-total {
  display: flex;
  align-items: center;
}

.foot-count {
  line-height: 100rpx;
  padding: 0 20rpx;
}

.foot-num {
  background-color: #2d996c;
  color: #ffffff;
  padding: 10rpx 40rpx;
  border-radius: 60rpx;
  text-align: center;
  align-items: center;
}

.modal-box {
  width: 750rpx;
  padding: 20rpx;
  border-radius: 30rpx 30rpx 0 0;
  background: #fff;
  padding: 10px;
  .modal-head {
    margin-bottom: 30rpx;
    .head-title {
      font-size: 32rpx;
      font-weight: bold;
    }
    .cuIcon-roundclosefill {
      font-size: 34rpx;
      color: #e0e0e0;
    }
  }
  .modal-content {
  }
  .modal-foot {
    width: 100%;
    height: 45px;
    margin-top: 10px;
  }
  .serve-btn {
    width: 690rpx;
    height: 80rpx;
    background: linear-gradient(
      92deg,
      #ffba40 0%,
      #ff503e 37%,
      #ff2f50 81%,
      #ff1b40 100%
    );
    color: #fff;
    line-height: 26px;
    border-radius: 14px;
    margin-top: 40rpx;
  }
}
/deep/.cu-form-group {
  padding: 0;
}
</style>